<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :show-bar="showBar" :current="current"
					@change="change" :is-scroll="false" swiperWidth="750">
				</u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer ==false">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res,index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待付款</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left">
											<image :src="baseUrl + item.img" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ res.countmoney }}.
											<text class="decimal">{{priceDecimal(res.countmoney)}}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more">
											<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
										</view>
										<view class="exchange btn">继续购买</view>
										<view class="exchange btn">撤销订单</view>
										<view class="evaluate btn" @click="pay(res.countmoney,res.ordernumber)">立即支付</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
							</block>

						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer ==false">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res, index) in  orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待发货</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left">
											<image :src="baseUrl +item.img" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ priceInt(res.countmoney) }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more">
											<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
										</view>
										<view class="logistics btn">继续购买</view>
										<view class="exchange btn">撤销订单</view>
										<view class="evaluate btn">提醒发货</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
							</block>

						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<block v-if="dataBuffer == false">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res,index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待确认</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left">
											<image :src="baseUrl +item.img" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ res.countmoney }}.
											<text class="decimal">{{priceDecimal(res.countmoney)}}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more">
											<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
										</view>
										<view class="exchange btn">继续购买</view>
										<view class="exchange btn">撤销订单</view>
										<view class="evaluate btn">确认收货</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer ==false">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res, index) in  orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right" v-if="res.status == 0">待支付</view>
										<view class="right" v-else-if="res.status == 1">待发货</view>
										<view class="right" v-else-if="res.status == 2">待收货</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left">
											<image :src="baseUrl +item.img" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ priceInt(res.countmoney) }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more">
											<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
										</view>
										<block v-if="res.status ==0">
											<view class="exchange btn">继续购买</view>
											<view class="exchange btn">撤销订单</view>
											<view class="evaluate btn">立即支付</view>
										</block>
										<block v-else-if="res.status ==1">
											<view class="logistics btn">继续购买</view>
											<view class="exchange btn">撤销订单</view>
											<view class="evaluate btn">提醒发货</view>
										</block>
										<block v-else-if="res.status ==2">
											<view class="logistics btn">查看物流</view>
											<view class="exchange btn">撤销订单</view>
											<view class="evaluate btn">确认收货</view>
										</block>
									</view>
								</view>
								<u-loadmore :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	// 引入订单为空提示组件
	import ordernull from '@/components/ordernull/ordernull.vue';
	var app = getApp();
	export default {
		components: {
			ordernull
		},
		data() {
			return {
				showBar: true, //初始化底部滑块开关
				orderList: [], //初始化订单列表数据
				dataBuffer: true, //数据展示开关
				list: [{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '全部订单',
					}
				],
				current: 1,
				swiperCurrent: 1,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				loadPage: [0, 0, 0, 0], //4个swiper总页
				page: 1,
				size: 4,
				baseUrl: this.$URL,
			};
		},
		onLoad(option) {

			// 兼容百度小程序
			// #ifdef MP-BAIDU
			this.showBar = false;
			// #endif
			// 获取参数
			let status = option.status || 0;
			this.current = status;
			this.swiperCurrent = status;
			// 获取订单信息
			this.getOrderList();
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		methods: {
			pay(totalAmount,outTradeNo) {
				//进入支付页面
				// 跳转到支付页面
				// H5 网站能够支付
				//  如果是H5页面，那么跳转到支付页面，进行支付
				// #ifdef  H5
				uni.navigateTo({
					url: "../pay/pay?outTradeNo=" + outTradeNo + "&totalAmount=" + countmoney
				})
				// #endif
				//  除了H5 网页，下单成功之后，直接返回订单列表页面
				// #ifndef  H5
				uni.redirectTo({
					url: "../orderlist/orderlist"
				})
				// #endif
			},
			// 向下滚动
			reachBottom() {
				// console.log(123)
				this.page++;
				if (this.page > this.loadPage[this.swiperCurrent]) {
					// 没有更多数据
					this.loadStatus.splice(this.swiperCurrent, 1, "nomore")
				} else {
					// 加载更多数据
					this.loadStatus.splice(this.swiperCurrent, 1, "loading");
					// 获取数据
					// setTimeout(()=>{
					this.getOrderList()
					// },500)
				}
			},
			// 获取订单信息
			async getOrderList() {
				// api  :http://localhost:3000/api/orderlist
				// params: uid  page  size  status  (0 代付款 1 代发货 2 待收货 3)
				// header 
				let header = app.globalData.header;
				let uid = app.globalData.userInfo.uid;
				let {
					page,
					size
				} = this;
				var option = {
					url: "orderlist",
					data: {
						uid,
						page,
						size,
						status: this.swiperCurrent == 3 ? "" : this.swiperCurrent
					},
					header,
				}
				let res = await this.$http(option);
				// console.log(res)
				if (res.data.code == 200) {
					if (res.data.list == null) {
						this.dataBuffer = false
					} else {
						this.dataBuffer = true;
						this.orderList = this.orderList.concat(res.data.list.data);
						this.loadPage[this.swiperCurrent] = res.data.list.totalPage;
						// console.log(this.loadPage)
					}
				} else if (res.data.code == 403) {
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.reLaunch({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.reLaunch({
									url: "../index/index"
								})
							}
						}
					})
				}
			},

			// tab栏切换
			change(index) {

				// 兼容支付宝小程序
				// #ifdef MP-ALIPAY
				this.current = index;
				// #endif
				this.swiperCurrent = index;
				// 选项卡切换的时候，让所有的数据恢复原来的状态
				this.page = 1;
				this.dataBuffer = false;
				this.orderList = [];
				this.getOrderList()
			},

			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.page = 1;
				this.dataBuffer = false;
				this.orderList = [];
				this.getOrderList()
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/order.scss';
</style>
